<!doctype html>
<html>
<head>
	<title>Conditional formats</title>
	<meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

	<script src="../../codebase/webix/webix.js" type="text/javascript"></script>
	<script src="../../codebase/spreadsheet.js" type="text/javascript"></script>

	<link rel="stylesheet" type="text/css" href="../../codebase/webix/webix.css">
	<link rel="stylesheet" type="text/css" href="../../codebase/spreadsheet.css">

	<script src="../common/data.js"></script>
	 <style>
         .custom_bold {
             font-weight: bold;
         }
         .custom_italic {
             font-style: italic;
         }
         .custom_color {
             color: red
         }
         .custom_bgcolor {
             background: #f9cb9c;
         }
         .custom_less {
             color: #ffe599;
             background: #6aa84f;
         }
     </style>
</head>
<body>
	<script type="text/javascript">
		webix.ready(function(){
			function showFormats(){
				var formats = $$("ssheet").conditions.serialize();

				var text = "";
				for(var i =0; i < formats.length; i++){
					text += JSON.stringify(formats[i], null,"")+"\r";
				}
				$$("txt").setValue(text);
			}

			var buttons = {
				width:300, view: "form",
				rows:[
					{ view:"button", value:"Get ranges", click: showFormats},
					{ view:"textarea", id:"txt" }
				]
			};

			var data = math_data_simple;

			// conditions in datasource
			data.conditions = [
				[3,6,">",100,"custom_bgcolor"],
				[3,7,"<",1000,"custom_less"]
			];

			webix.ui({
				cols:[
					buttons,
					{
						id: "ssheet",
						view:"spreadsheet",
						data: data,
						toolbar: "full",
						conditionStyle:[
							{name: 'bold', css: "custom_bold"},
							{name: 'italic', css: "custom_italic"},
							{name: 'red', css: "custom_color"},
							{name: 'highlight', css: "custom_bgcolor"},
							{name: 'green', css: "custom_less"}
						]
					}
				]

			});
		});
	</script>
</body>
</html>